<template>
	<view class="detail-container">
		<view class="detail-card">
			<view class="detail-header">
				<text class="device-name">{{
					detail.deviceName
				}}</text>
				<up-tag
					:text="getStatusText(detail.repairStatus)"
					:type="getStatusType(detail.repairStatus)"
				/>
			</view>

			<view class="detail-content">
				<view class="info-item">
					<text class="info-label">设备编号:</text>
					<text class="info-value">{{
						detail.repairId
					}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">设备名称:</text>
					<text class="info-value">{{
						equipment.name
					}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">故障类型:</text>
					<text class="info-value">{{
						fultTypeList[0].find(
							(res) => detail.faultType == res.id
						)?.label
					}}</text>
				</view>

				<view class="info-item">
					<text class="info-label">报修人:</text>
					<text class="info-value">{{
						detail.reporter
					}}</text>
				</view>

				<view class="info-item">
					<text class="info-label">报修时间:</text>
					<text class="info-value">{{
						detail.reportTime
					}}</text>
				</view>

				<view class="info-item">
					<text class="info-label">所在位置:</text>
					<text class="info-value">{{
						equipment.location
					}}</text>
				</view>

				<view class="info-item" v-if="detail.repairer">
					<text class="info-label">维修人员:</text>
					<text class="info-value">{{
						detail.repairer
					}}</text>
				</view>

				<view class="info-item" v-if="detail.repairTime">
					<text class="info-label">维修时间:</text>
					<text class="info-value">{{
						detail.repairTime
					}}</text>
				</view>

				<view class="info-item">
					<text class="info-label">问题描述:</text>
					<text class="info-value">{{
						detail.faultDescription
					}}</text>
				</view>

				<view class="info-item" v-if="detail.repairNotes">
					<text class="info-label">维修结果:</text>
					<text class="info-value">{{
						detail.repairNotes
					}}</text>
				</view>
			</view>

			<!-- 图片预览 -->
			<view
				class="image-preview"
				v-if="
					detail.equipmentImg &&
					detail.equipmentImg.length > 0
				"
			>
				<text class="preview-title">相关图片</text>
				<up-album
					:urls="detail.equipmentImg"
					keyName="url"
				></up-album>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons" v-if="!isDetail">
			<up-button
				type="success"
				text="维修完成"
				@click="showCompleteDialog = true"
				v-if="detail.repairStatus === '1'"
			></up-button>

			<div style="height: 20rpx"></div>
			<up-button
				type="error"
				text="无法维修"
				@click="showCancelDialog = true"
				v-if="detail.repairStatus === '1'"
			></up-button>
		</view>

		<!-- 维修完成弹窗 -->
		<up-modal
			:show="showCompleteDialog"
			title="维修完成"
			@confirm="handleCompleteRepair"
			@cancel="showCompleteDialog = false"
		>
			<view class="form-content">
				<up-input
					v-model="repairResult"
					type="textarea"
					placeholder="请输入故障原因"
					:height="150"
					border="none"
				></up-input>
			</view>
		</up-modal>

		<!-- 无法维修弹窗 -->
		<up-modal
			:show="showCancelDialog"
			title="无法维修"
			@confirm="handleCancelRepair"
			@cancel="showCancelDialog = false"
		>
			<view class="form-content">
				<up-input
					v-model="cancelReason"
					type="textarea"
					placeholder="请输入故障原因"
					:height="150"
					border="none"
				></up-input>
			</view>
		</up-modal>
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { formatTime } from "@/utils/date";
import {
	listRepair,
	getRepair,
	delRepair,
	addRepair,
	updateRepair,
	repairEquipment,
	listEquipment,
	getEquipment
} from "@/api/repair";

const fultTypeList = ref([
	[
		{ label: "机械故障", id: "1" },
		{ label: "电气故障", id: "2" },
		{ label: "软件故障", id: "3" },
		{ label: "人为损坏", id: "4" },
		{ label: "自然老化", id: "5" }
	]
]);

const REPAIR_STATUS = {
	PENDING: "1",
	PROCESSING: "2",
	COMPLETED: "3",
	CANCELLED: "4"
};

const detail = ref({});
const id = ref("");
const equipment = ref({});
const isDetail = ref(true);

const showCompleteDialog = ref(false);
const showCancelDialog = ref(false);
const repairResult = ref("");
const cancelReason = ref("");

// 维修完成
const handleCompleteRepair = async () => {
	if (!repairResult.value) {
		uni.showToast({
			title: "请填写维修结果",
			icon: "none"
		});
		return;
	}

	try {
		await repairEquipment({
			...detail.value,
			repairStatus: REPAIR_STATUS.COMPLETED,
			repairNotes: repairResult.value
			// repairTime: formatTime(new Date())
		});
		showCompleteDialog.value = false;
		uni.showToast({
			title: "操作成功",
			icon: "success"
		});
		// 刷新数据
		await fetchDetail();
	} catch (error) {
		uni.showToast({
			title: "操作失败",
			icon: "error"
		});
	}
};

// 无法维修
const handleCancelRepair = async () => {
	if (!cancelReason.value) {
		uni.showToast({
			title: "请填写无法维修的原因",
			icon: "none"
		});
		return;
	}

	try {
		await repairEquipment({
			...detail.value,
			repairStatus: REPAIR_STATUS.CANCELLED,
			repairNotes: cancelReason.value
			// repairTime: formatTime(new Date())
		});

		showCancelDialog.value = false;
		uni.showToast({
			title: "操作成功",
			icon: "success"
		});

		// 刷新数据
		await fetchDetail();

		// 通知列表页面更新
		uni.$emit("repairStatusChanged", {
			id: id.value,
			status: REPAIR_STATUS.CANCELLED
		});
	} catch (error) {
		uni.showToast({
			title: "操作失败",
			icon: "error"
		});
	}
};

onLoad((options) => {
	id.value = options.id;
	isDetail.value = options.detail === "true" ? true : false;
	fetchDetail();
});

// 获取详情数据
const fetchDetail = async () => {
	const res = await getRepair(id.value);
	detail.value = res.data.data;
	if (detail.value.equipmentImg) {
		detail.value.equipmentImg = detail.value.equipmentImg
			.split(",")
			.map((res, index) => {
				return {
					id: index,
					url: res
				};
			});
		console.log("图片图片", detail.value.equipmentImg);
	}
	const res1 = await getEquipment(detail.value.equipmentId);
	equipment.value = res1.data.data;
};

// 获取状态文本
const getStatusText = (status) => {
	switch (status) {
		case REPAIR_STATUS.PENDING:
			return "待受理";
		case REPAIR_STATUS.PROCESSING:
			return "维修中";
		case REPAIR_STATUS.COMPLETED:
			return "已修复";
		case REPAIR_STATUS.CANCELLED:
			return "无法修复";
		default:
			return "未知状态";
	}
};

// 获取状态标签类型
const getStatusType = (status) => {
	switch (status) {
		case REPAIR_STATUS.PENDING:
			return "warning";
		case REPAIR_STATUS.PROCESSING:
			return "primary";
		case REPAIR_STATUS.COMPLETED:
			return "success";
		case REPAIR_STATUS.CANCELLED:
			return "info";
		default:
			return "default";
	}
};
</script>

<style lang="scss" scoped>
.detail-container {
	padding: 20rpx;

	.detail-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.detail-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.device-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.detail-content {
			.info-item {
				display: flex;
				margin-bottom: 16rpx;
				font-size: 28rpx;

				.info-label {
					color: #666;
					width: 160rpx;
				}

				.info-value {
					color: #333;
					flex: 1;
				}
			}
		}

		.image-preview {
			margin-top: 30rpx;
			.preview-title {
				display: block;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	.action-buttons {
		margin-top: 40rpx;
	}
}

.detail-container {
	padding: 20rpx;

	.detail-card {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.detail-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 24rpx;

			.device-name {
				font-size: 36rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.detail-content {
			.info-item {
				display: flex;
				margin-bottom: 16rpx;
				font-size: 28rpx;

				.info-label {
					color: #666;
					width: 160rpx;
				}

				.info-value {
					color: #333;
					flex: 1;
				}
			}
		}

		.image-preview {
			margin-top: 30rpx;

			.preview-title {
				display: block;
				margin-bottom: 16rpx;
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	.action-buttons {
		margin-top: 40rpx;
	}

	.form-content {
		padding: 20rpx;
	}
}
</style>